<div class="top">
  <app-left-top-panel [type]="'nx'"></app-left-top-panel>
</div>

<div class="nx-bottom">
  <!--<button nz-button nzType="primary" (click)="open()">Open</button>
  <button nz-button nzType="primary" (click)="close()">close</button>-->
  <!-- <div class="video-wrap">
    <app-video-list></app-video-list>
  </div> -->
  <div class="video-wrap">
    <!-- <div class="btn-arrow" (click)="arrowToggle = !arrowToggle" [ngClass]="arrowToggle ? 'arrow-up' : 'arrow-down'"></div> -->
    <div class="video-box" *ngFor="let item of videos">
      <app-map-video [monitorId]="item.id"></app-map-video>
    </div>
  </div>

  <div class="chart-wrap">
    <div class="tab" (click)="modalShow=true">
      <div>详情</div>
    </div>
    <div class="chart-block">
      <div class="charts" echarts [options]="pieOpt" [merge]="chartMergeOpt" style="height: 170px;"></div>
    </div>
  </div>
</div>

<div class="point" [ngClass]="'point' + idx" *ngFor="let item of points;let idx = index">
  <img class="p-img icon-qy" (mouseenter)="item.eHover = true" (mouseleave)="item.eHover = false"
    (click)="item.eClick = !item.eClick" src="./assets/images/display/icon-qy.png" alt="">
  <div class="p-cont bg-qy" [ngClass]="item.className" [hidden]="!(item.eHover || item.eClick)">
    <div class="title">
      <span>{{ item.wiu_nm }}</span>
    </div>
    <ul>
      <li>取水指标：{{ item.day_w_total }}万m³</li>
      <li>实际取水：{{ item.day_w }}万m³</li>
      <li>流量：{{ item.mp_q }}m³/s</li>
    </ul>
  </div>
</div>
<div class="point" [ngClass]="'point2_' + idx" *ngFor="let item of points2;let idx = index">
  <img class="p-img" [ngClass]="item.dat_tp == '1' ? 'icon-pump' : 'icon-nyqsk'" (mouseenter)="item.eHover = true"
    (mouseleave)="item.eHover = false" (click)="item.eClick = !item.eClick" [src]="'./assets/images/display/' + (item.dat_tp == '1' ? 'icon-pump' :
    'icon-nyqsk') + '.png'" alt="">
  <div class="p-cont bg-nyqsk" [ngClass]="item.className" [hidden]="!(item.eHover || item.eClick)">
    <div class="title">
      <span>{{ item.wiust_nm }}</span>
    </div>
    <ul>
      <li>实际取水：{{ item.day_w }}万m³</li>
      <li>流量：{{ item.mp_q }}m³/s</li>
    </ul>
  </div>
</div>

<nz-modal nzClassName="display-modal" nzWidth="840" [(nzVisible)]="modalShow" [nzTitle]="null" [nzFooter]="null"
  [nzClosable]="false">
  <div class="detail-content">
    <i nz-icon nzType="close" nzTheme="outline" class="close-icon" (click)="modalShow=false"></i>
    <div class="title">
      用水详情
    </div>

    <div class="section">
      <div class="chart-wrap">
        <div class="charts" echarts [options]="pieOpt" [merge]="chartMergeOpt2" style="height: 170px;"></div>
      </div>
      <div class="table1-wrap">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>小计</th>
              <th>农业</th>
              <th>工业</th>
              <th>生活</th>
              <th>生态</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of table1Data" class="row">
              <td (click)="rowClick(item)">{{item.name}}</td>
              <td>{{item['total']}}</td>
              <td>{{item['农业用水']}}</td>
              <td>{{item['工业用水']}}</td>
              <td>{{item['生活用水']}}</td>
              <td>{{item['生态用水']}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div style="padding-bottom: 20px;">
      <div class="table2-wrap">
        <table>
          <thead>
            <tr>
              <th>区县</th>
              <th>小计</th>
              <th>农业</th>
              <th>工业</th>
              <th>生活</th>
              <th>生态</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of table2Data" class="row">
              <td>{{item.name}}</td>
              <td>{{item['total']}}</td>
              <td>{{item['农业用水']}}</td>
              <td>{{item['工业用水']}}</td>
              <td>{{item['生活用水']}}</td>
              <td>{{item['生态用水']}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</nz-modal>
